<template>
	<view class="">
		<view class="" style="padding: 20rpx;">
			<u-button @click="scrollFn" type="success" shape="circle" text="点击选择设备"></u-button>
		</view>
		<shuangshuiwei ref="myswj" :listobjSSW="objSSW"></shuangshuiwei>
		<liu-liang-ji ref="myllj" :listobjQ="objQ"></liu-liang-ji>
		<shui-shen ref="myss" :listobjD="objD"></shui-shen>
		<deng-xiao-liu-su ref="mydxls" :listobjEF="objEF"></deng-xiao-liu-su>
		<u-popup :closeable="true" :closeOnClickOverlay="false" :show="show" mode="left" @close="close" @open="open">
			<view style="width: 680rpx;padding: 10rpx;">
				<view class="tile">
					<view class="box">

					</view>
					<view class="text">
						选择设备
					</view>
				</view>
				<view class="device_flx">
					<view :class="activnum === index ? 'activscroll-list':'' " v-for="(i, index) in deviceList"
						:key="index" class="scroll-list" @click="activeFn(i,index)">
						<view class="device_list">
							{{i.deviceName}}
						</view>
						<view class="product_list">
							{{i.productName}}
						</view>
					</view>
				</view>
				<view class="" style="margin: 20rpx 0 40rpx 0;">
					<uni-pagination pageSize="12" @change="change" :show-icon="true" :total="total" />
				</view>
				<view class="tile">
					<view class="box">

					</view>
					<view class="text">
						选择日期
					</view>
				</view>
				<view class="time_list">
					<view class="time_item" @click="timemnumFn(i,index)" :class="timemnum === index ? 'acvtime_item':''"
						v-for="(i,index) in timeList" :key="index">
						{{i.text}}
					</view>
				</view>
				<view class=""
					style="width: 680rpx;display: flex;align-items: center;justify-content: space-around;margin-top: 100rpx;">
					<u-button @click="cancelFn" type="info" shape="circle" text="取消"></u-button>
					<view class="" style="width: 30rpx;">

					</view>
					<u-button @click="submitFn" type="success" shape="circle" text="确定"></u-button>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import dayjs from '@/common/dayjs.min.js';
	import shuangshuiwei from '@/components/shuangShuiWei.vue';
	import liuLiangJi from '@/components/liuLiangJi.vue';
	import shuiShen from '@/components/shuiShen.vue';
	import dengXiaoLiuSu from '@/components/dengXiaoLiuSu.vue';
	export default {
		components: {
			shuangshuiwei,
			liuLiangJi,
			shuiShen,
			dengXiaoLiuSu
		},
		data() {
			return {
				objQ: {
					typ: '',
					list: []
				},
				objD: {
					typ: '',
					list: []
				},
				objEF: {
					typ: '',
					list: []
				},
				objWATL: {
					typ: '',
					list: []
				},
				objHLUT: {
					typ: '',
					list: []
				},
				objHLDT: {
					typ: '',
					list: []
				},
				objSSW: {
					hlut: {},
					watl: {},
					hldt: {}
				},
				timemnum: null,
				timeList: [{
					text: '今日',
					value: '00:00:00'
				}, {
					text: '3天',
					value: '3'
				}, {
					text: '15天',
					value: '15'
				}, {
					text: '60天',
					value: '60'
				}],
				deviceList: [],
				show: false,
				activnum: null,
				pageSize: 12,
				pageNum: 1,
				total: 0,
				productKey: '',
				deviceName: '',
				identifier: '',
				beginReportingTime: '', //开始时间
				endReportingTime: '', //结束时间
				typ: ''
			};
		},
		onLoad() {
			// setTimeout(() => {
			// 	this.onloshowFn()
			// }, 100)
			let num = 1
			this.deviceFn(num)
		},
		methods: {
			// 确定
			submitFn() {
				if (this.deviceName == '' || this.beginReportingTime == '') {

					return
				}
				this.objQ = {}
				this.objD = {}
				this.objEF = {}
				let arr = ['Q', 'D', 'EF', 'WATL', 'HLUT', 'HLDT']

				for (let i = 0; i < arr.length; i++) {
					setTimeout(() => {
						let str = arr[i]
						this.sswFn(str)
					}, 100 * (i + 1))
				}
				this.show = false
			},
			// 取消
			cancelFn() {

				this.show = false
			},
			// 选择日期
			timemnumFn(e, index) {
				this.timemnum = index
				let now = dayjs();
				// 当前时间减去2小时
				// 今日时间
				let todayStart = now.subtract(0, 'hour').format('YYYY-MM-DD ') + '00:00:00'
				let todayEnd = now.subtract(0, 'hour').format('YYYY-MM-DD HH:mm:hh')
				// 3天
				let threeStart = now.subtract(2, 'day').format('YYYY-MM-DD ') + '00:00:00'
				let threeEnd = now.subtract(0, 'hour').format('YYYY-MM-DD HH:mm:hh')
				// 15天
				let fifteenStart = now.subtract(14, 'day').format('YYYY-MM-DD ') + '00:00:00'
				let fifteenEnd = now.subtract(0, 'hour').format('YYYY-MM-DD HH:mm:hh')
				// 100天
				let sixtyStart = now.subtract(59, 'day').format('YYYY-MM-DD ') + '00:00:00'
				let sixtyEnd = now.subtract(0, 'hour').format('YYYY-MM-DD HH:mm:hh')
				if (index == 0) {
					this.typ = '今天'
					this.beginReportingTime = todayStart
					this.endReportingTime = todayEnd
				}
				if (index == 1) {
					this.typ = '3天'
					this.beginReportingTime = threeStart
					this.endReportingTime = threeEnd
				}
				if (index == 2) {
					this.typ = '15天'
					this.beginReportingTime = fifteenStart
					this.endReportingTime = fifteenEnd
				}
				if (index == 3) {
					this.typ = '60天'
					this.beginReportingTime = sixtyStart
					this.endReportingTime = sixtyEnd
				}
			},
			// 选择设备
			activeFn(e, index) {
				this.activnum = index
				this.deviceName = e.deviceName
				this.productKey = e.productKey
			},
			// 右弹窗
			scrollFn() {
				this.show = true
			},
			open() {
				this.activnum = null
				this.deviceName = ''
				this.productKey = ''
				this.timemnum = null
				this.beginReportingTime = ''
				this.endReportingTime = ''
				console.log('open');
			},
			close() {
				this.show = false
				console.log('close');
			},
			change(e) {
				this.activnum = null
				this.deviceName = ''
				this.productKey = ''
				this.deviceFn(e.current)
			},
			// 水位计
			sswFn(e) {
				// console.log('水位数据',this.deviceNamethis,this.productKey,this.beginReportingTime,this.endReportingTime,);
				uni.$u.http.get('/device/device_reported_data/selectModelReportData', {
					params: {
						"tabPosition": 1,
						"identifier": e,
						"deviceName": this.deviceName,
						"productKey": this.productKey,
						"beginReportingTime": this.beginReportingTime,
						"endReportingTime": this.endReportingTime,
					}
				}).then(res => {
					if (res.code == 200) {
						let items = res.data
						let uniqueItems = items.filter((item, index, self) =>
						  index === self.findIndex((i) => dayjs(i.time).format('HH') === dayjs(item.time).format('HH'))
						);
						console.log('数据', res);
						console.log('去重数据', uniqueItems);
						if (res.data.length != 0) {
							let list = uniqueItems
							// this.onloshowFn()
							if (list[0].identifier == 'Q') {
								this.objQ.list = list
								this.objQ.typ = this.typ
								this.$refs.myllj.onloshow()
							} else if (list[0].identifier == 'D') {
								this.objD.list = list
								this.objD.typ = this.typ
								this.$refs.myss.onloshow()
							} else if (list[0].identifier == 'EF') {
								this.objEF.list = list
								this.objEF.typ = this.typ
								this.$refs.mydxls.onloshow()
							} else if (list[0].identifier == 'WATL') {
								let arr = []
								arr = list.map((i) => {
									return i.value * 1
								})
								let arrtime = []
								arrtime = list.map((i) => {
									return i.time
								})
								let obj = {
									typ: this.typ,
									name: "上限水位",
									data: arr,
									time:arrtime
								}
								this.objSSW.hlut = obj
							} else if (list[0].identifier == 'HLUT') {
								let arr = []
								arr = list.map((i) => {
									return i.value * 1
								})
								let arrtime = []
								arrtime = list.map((i) => {
									return i.time
								})
								let obj = {
									typ: this.typ,
									name: "实时水位",
									data: arr,
									time:arrtime
								}
								this.objSSW.watl = obj
							} else if (list[0].identifier == 'HLDT') {
								let arr = []
								arr = list.map((i) => {
									return i.value * 1
								})
								let arrtime = []
								arrtime = list.map((i) => {
									return i.time
								})
								let obj = {
									typ: this.typ,
									name: "下限水位",
									data: arr,
									time:arrtime
								}
								this.objSSW.hldt = obj
								setTimeout(() => {
									this.$refs.myswj.onloshow()
								}, 1000)
								console.log('双水位', this.objSSW);
							}
						} else {
							this.onloshowFn()
						}
					} else {
						uni.showToast({
							title: '网络错误',
							duration: 2000
						});
						uni.reLaunch({
							url: '/pages/home/login'
						});
					}
				}).catch(err => {
					console.log('错误', err);
					uni.showToast({
						title: '网络错误',
						duration: 2000
					});
					uni.reLaunch({
						url: '/pages/home/login'
					});
				})
			},
			// 单位设备列表
			deviceFn(e) {
				uni.$u.http.get('/device/device/listPhone', {
					params: {
						"pageSize": 12,
						"pageNum": e,
					}
				}).then(res => {
					if (res.code == 200) {
						this.deviceList = res.rows
						this.total = res.total
					} else {
						uni.showToast({
							title: '暂无数据',
							duration: 2000
						});
						uni.reLaunch({
							url: '/pages/home/login'
						});
					}
				}).catch(err => {
					console.log('错误', err)
					uni.showToast({
						title: '服务器断开',
						duration: 2000
					});
					uni.reLaunch({
						url: '/pages/home/login'
					});
				})
			},
			// 执行子组件方法
			onloshowFn() {
				this.$refs.myswj.onloshow()
				this.$refs.myllj.onloshow()
				this.$refs.myss.onloshow()
				this.$refs.mydxls.onloshow()
			}
		},
		onResize() {
			// 横屏竖屏
			uni.getSystemInfo({
				success: (res) => {
					// console.log(res.windowWidth);
					// console.log(res.windowHeight);
					if (res.windowWidth > res.windowHeight) {
						console.log('横屏');
						setTimeout(() => {
							this.$refs.myswj.onloshow()
							this.$refs.myllj.onloshow()
							this.$refs.myss.onloshow()
							this.$refs.mydxls.onloshow()
						}, 100)
					} else {
						console.log('竖屏');
						setTimeout(() => {
							this.$refs.myswj.onloshow()
							this.$refs.myllj.onloshow()
							this.$refs.myss.onloshow()
							this.$refs.mydxls.onloshow()
						}, 100)
					}
				}
			});
		},
	};
</script>

<style scoped lang="scss">
	.device_flx {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
		background-color: #e5eff4;
		width: 680rpx;
		height: 510rpx;
		border-radius: 20rpx;
	}

	.scroll-list {
		width: 215rpx;
		border: 1rpx solid #ffffff;
		margin: 5rpx 0;
		text-align: center;
		border-radius: 20rpx;
		background-color: #c9dcee;

		// border-radius: 0 0 20rpx 20rpx;
		.device_list {
			padding: 0rpx 15rpx;
			background-color: #839cbc;
			border-radius: 20rpx 20rpx 0 0;
			color: #ffffff;
		}

		.product_list {
			padding: 20rpx 10rpx;
			font-size: 25rpx;
		}
	}

	.activscroll-list {
		background-color: #ebcbae;

		.device_list {
			background-color: #8f8787;
			color: #ffffff;
		}
	}

	.time_list {
		width: 650rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;

		// background-color: #c9dcee;
		.time_item {
			width: 140rpx;
			padding: 30rpx;
			border-radius: 10rpx;
			background-color: #839cbc;
			color: #ffffff;
			margin: 10rpx;
			text-align: center;
			font-size: 40rpx;
		}

		.acvtime_item {
			width: 140rpx;
			padding: 30rpx;
			border-radius: 10rpx;
			background-color: #d6b99f;
			color: #003248;
			margin: 10rpx;
			text-align: center;
			font-size: 40rpx;
		}
	}

	.tile {
		display: flex;
		align-items: center;
		margin-top: 30rpx;

		.box {
			width: 15rpx;
			height: 18px;
			border-radius: 20rpx;
			background-color: #415f9d;
			margin: 0 10rpx 0 15rpx;
		}

		.text {
			font-size: 40rpx;
		}
	}
</style>
<style>
	page {
		background-color: #f6f6f6;
	}
</style>